@extends('admin_system.layout.layout')

@section('content')
    <br>
    <div class="container-fluid">
        <div class="list-group">
            <a href="#" class="list-group-item active">
                <h4 class="list-group-item-heading">CLO编辑页面</h4>
                <p class="list-group-item-text">编辑CLO</p>
            </a>
        </div>
        <div class="panel panel-danger">
            <div class="panel-heading">
                <h3 class="panel-title text-center">编辑</h3>
            </div>
            <div class="panel-body">
                <form action="{{route('lessons_clo_update')}}" id="form" method="post" enctype="multipart/form-data">
                    {{csrf_field()}}
                    <div class="form-group">
                        <label for="inputID" class="control-label">CLO名字:</label>
                        <div class="">
                            <select name="user_id" id="" class="form-control">
                                @foreach($clos as $k=>$v)
                                    <option value="{{$v->user_id}}"
                                            @if($v->user_id==$clo_info->user_id) selected @endif>{{$v->YourName}}</option>
                                @endforeach
                            </select>
                            <input type="hidden" name="clo_id" value="{{$clo_info->clo_id}}">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="inputID" class="control-label">标题:</label>
                        <div class="">
                            <input type="text" name="title" id="inputID" class="form-control"
                                   value="{{$clo_info->title}}"
                                   required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="user_img" class="control-label">学习官图片<i class="fa fa-picture-o"></i></label>
                        <div style="width: 200px;height: 200px;border: 1px solid transparent">
                            <img id="pre_img" src="{{$clo_info->user_img}}" alt="2:3 比例" style="text-align: center;line-height: 200px;width: 100%;display: block;font-size: 35px
;background: grey;opacity: 0.3;max-height: 200px">
                        </div>
                        <br>
                        <div class="">
                            <input type="file" name="user_img" id="user_img" class="form-control" value="" title=""
                                   required="required" accept="image/gif,image/png,image/jpeg,image/jpg">
                        </div>
                    </div>
                    <br>


                    <div class="form-group">
                        <label for="inputID" class=" control-label">学习官介绍</label>
                        <input type="hidden" name="introduce" id="introduce_{{$clo_info->user_id}}">
                        <div id="editor">
                            <div>
                                {!! $clo_info->introduce !!}
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="">
                            <button type="button" class="btn btn-danger" id="send" style="width: 100%">保存修改</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="{{asset('admin/js/wangEditor.min.js')}}"></script>
    <link href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
    <script>
        var E = window.wangEditor
        var editor = new E('#editor')
        editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'link',  // 插入链接
            'list',  // 列表
            'justify',  // 对齐方式
            'quote',  // 引用
            'emoticon',  // 表情
        ];
        editor.customConfig.onchange = function (html) {
            $('#introduce_{{$clo_info->user_id}}').val(editor.txt.text());
        }
        editor.create()


        $(function () {
            $('#send').on('click', function () {
                var user_img = document.getElementById('user_img');
                var img = user_img.files[0];
                if (img) {
                    var src = URL.createObjectURL(img);
                    var img = new Image();
                    img.src = src;
                    img.onload = function () {
                        var width = img.width;
                        var height = img.height;
                        var bili = width / height;
                        if (bili.toFixed(2) == 0.67) {
                            $('#pre_img').attr('src', src).css({'background': 'none', 'opacity': '1'});
                            $('#send').on('click', function () {
                                html = $('.w-e-text').text();
                                var str = Trim(html, 'g');
                                $('#introduce_{{$clo_info->user_id}}').val(str);
                                $('#form').submit();
                            })

                        } else {
                            $('#pre_img').attr('alt', '比例错误');
                            $('#pre_img').attr('src', null).css({'background': 'grey', 'opacity': '0.3'});
                            console.log(bili.toFixed(2));
                            swal("Oops...", "请选择2:3的比例的图片!", "error");
                        }
                    }
                } else {
                    html = $('.w-e-text').text();
                    var str = Trim(html, 'g');
                    $('#introduce_{{$clo_info->user_id}}').val(str);
                    $('#form').submit();
                }
            })


            $('#user_img').on('change', function (e) {
                    var file = e.target.files[0];
                    var src = URL.createObjectURL(file);
                    var img = new Image();
                    img.src = src;
                    img.onload = function () {
                        var width = img.width;
                        var height = img.height;
                        var bili = width / height;
                        if (bili.toFixed(2) == 0.67) {
                            $('#pre_img').attr('src', src).css({'background': 'none', 'opacity': '1'});
                            $('#send').on('click', function () {
                                html = $('.w-e-text').text();
                                var str = Trim(html, 'g');
                                $('#introduce_{{$clo_info->user_id}}').val(str);
                                $('#form').submit();
                            })

                        } else {
                            $('#pre_img').attr('alt', '比例错误');
                            $('#pre_img').attr('src', null).css({'background': 'grey', 'opacity': '0.3'});
                            console.log(bili.toFixed(2));
                            swal("Oops...", "请选择2:3的比例的图片!", "error");
                        }
                    }
                }
            );
        })

        function Trim(str, is_global) {
            var result;
            result = str.replace(/(^\s+)|(\s+$)/g, "");
            if (is_global.toLowerCase() == "g") {
                result = result.replace(/\s/g, "");
            }
            return result;
        }
    </script>


@stop
